JS导出页面为PDF，分页导出

最新推荐文章于 2024-01-19 15:14:43 发布
最新推荐文章于 2024-01-19 15:14:43 发布
阅读量543 收藏
点赞数
分类专栏： 笔记 文章标签： javascript vue.js css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35695041/article/details/121044354
版权 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- cdn引入vue以及elementui组件库 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <!-- echarts相关文件 -->
   <script src="echat.js" type="text/javascript" charset="utf-8"></script>
   <!-- pdf -->
      <script src="./bluebird.js" type="text/javascript" charset="utf-8"></script>
      <script src="./html2canvas.js" type="text/javascript" charset="utf-8"></script>
      <script src="./jsPdf.debug.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <style type="text/css">
        #app {
            max-width: 1200px;
            margin: 0 auto;
            background-color: #fff;
            padding:0px;
            height:100%;
        }

        [v-cloak] {
            display: none;
        }

        .headTitle {
            text-align: center;
            font-size: 30px;
        }

        .headDate {
            text-align: center;
        }

        .blocked {
            width: 6px;
            height: 25px;
            border-radius: 10px;
            margin-right: 10px;
            display: inline-block;
            background-color: #409EFF;
        }

        .bpbox {
            display: flex;
            align-items: center;
            margin-bottom: 25px;
            color: #333;
            font-weight: bold;
        }

        .markdownbase {
            margin-bottom: 20px;
        }
        #chart_example {
          width: 95%;
          padding: 10px 10px;
          height: 500px;
          border: 1px solid #ccc;
          margin: 10px auto;
        }
        #Basic{
           width: 95%;
           padding: 10px 10px;
           height: 500px;
           border: 1px solid #ccc;
           margin: 10px auto; 
        }
    </style>
    <body>
        <div id="app" v-cloak>
            <h1 class="headTitle" v-cloak>{{userbase.title}}</h1>
            <div class="headDate" v-cloak>
                测评时间{{userbase.createtime}}
            </div>
            <el-button type="info" @click="getDown" id="btn-html2canvas">下载</el-button>
            <!-- 用户详情数据 -->
            <div class="userBase">
                <div class="bpbox">
                    <span class="blocked"></span> 个人信息
                </div>
                <el-descriptions>
                    <el-descriptions-item label="姓名">{{userbase.name}}</el-descriptions-item>
                    <el-descriptions-item label="性别">{{userbase.sex}}</el-descriptions-item>
                    <el-descriptions-item label="年龄"> {{userbase.age}}</el-descriptions-item>
                    <el-descriptions-item label="出生日期">
                        {{userbase.bothTime}}
                    </el-descriptions-item>
                    <el-descriptions-item label="组织结构">{{userbase.departName}}</el-descriptions-item>
                </el-descriptions>
            </div>
            <!-- 测评结果 -->
            <div class="">
                <div class="bpbox">
                    <span class="blocked"></span> 测评结果
                </div>
                <div class="markdownbase">
                    <el-tabs type="border-card">
                        <el-tab-pane label="抑郁">
                            <div v-html="content"></div>
                        </el-tab-pane>
                    </el-tabs>

                </div>
                <div class="markdownbase">
                    <el-tabs type="border-card">
                        <el-tab-pane label="焦虑">
                            <div v-html="content"></div>
                        </el-tab-pane>
                    </el-tabs>
                </div>
            </div>
            <!-- 干预建议 -->
            <div class="">
                <div class="bpbox">
                    <span class="blocked"></span> 干预建议
                </div>
                <div class="markdownbase">
                    <el-tabs type="border-card">
                        <el-tab-pane label="分析">
                            <div v-html="content"></div>
                        </el-tab-pane>
                    </el-tabs>
                </div>
            </div>
            <!-- 共病检测 -->
            <div class="">
                <div class="bpbox">
                    <span class="blocked"></span> 共病检测
                </div>
                <div class="markdownbase">
                    <el-tabs type="border-card">
                        <el-tab-pane label="分析">
                            <div v-html="content"></div>
                        </el-tab-pane>
                    </el-tabs>
                </div>
            </div>
            <!-- 雷达图 -->
            <div class="">
                    <div id="Basic"></div>
            </div>
            <!-- 维度结果 -->
            <div class="">
                <div class="bpbox">
                    <span class="blocked"></span> 维度结果
                </div>
                <div class="markdownbase">
                    <el-tabs type="border-card">
                        <el-tab-pane label="分析">
                            <div v-html="content"></div>
                        </el-tab-pane>
                    </el-tabs>
                </div>
            </div>
            <!-- 标准分趋势 -->
            <div class="">
                <div class="bpbox">
                    <span class="blocked"></span> 标准分趋势
                </div>
                <div class="markdownbase">
                     <div id="chart_example"></div>
                </div>
            </div>
        </div>
      
  
        <script type="text/javascript">
            var app = new Vue({
                el: "#app",
                data: {
                    // 用户个人详情数据
                    userbase: {
                        title: "哈哈哈哈",
                        name: "皮卡丘",
                        sex: "男",
                        age: 25,
                        bothTime: "1995-02-11",
                        createtime: "2021-06-11 13:41:22",
                        departName: "小学部,小学一年级,1班"

                    },
                    // 雷达
                   Basic:{
                     title: {
                       text: '雷达图'
                     },
                     tooltip: {
                       trigger: 'axis'
                     },
                     legend: {
                       left: 'center',
                       data: [
                         '雷达',
                       ]
                     },
                     radar: [
                       {
                         indicator: [
                           { text: '一般焦虑', max: 200 },
                           { text: '抑郁', max: 200 },
                           { text: '暴躁', max: 200 },
                           { text: '幻想', max: 200 }
                         ],
                         center: ['50%', '50%'],
                         radius: 150
                       },
                     ],
                     series: [
                       {
                         type: 'radar',
                         tooltip: {
                           trigger: 'item'
                         },
                         areaStyle: {},
                         data: [
                           {
                             value: [60, 73, 85, 40],
                             name: '雷达'
                           }
                         ]
                       },
                     ]
                   },
                    // 富文本来源
                    content: "<h4 class=\"ql-align-justify\"><br></h4><h4 class=\"ql-align-justify\">你知道人快速且下意识的表情可以透露出ta的真实情绪吗？</h4><h4 class=\"ql-align-justify\">你知道不用测谎仪怎么看出ta是否在撒谎吗？</h4><h4 class=\"ql-align-justify\"><strong>只要你学会了微表情分析，你就是个“人肉测谎仪”！</strong>——然而！有一部经典美剧，可以让你快速入门微表情分析。</h4><h4 class=\"ql-align-justify\"><strong>这就是经典美剧，《别对我说谎》也译作《千谎百计》！</strong></h4><h4 class=\"ql-align-justify\"><br></h4><h4></h4><h4><span style=\"background-color: rgb(255, 255, 255); color: rgb(182, 182, 182);\">图／《千谎百计》正式海报</span></h4></h4>",
       options:{
            title: {
              text: '标准分趋势'
            },
            tooltip: {
              trigger: 'axis'
            },
            legend: {
              data: ['抑郁', '广场恐惧', '特殊恐惧症', '社交恐惧', '强迫障碍']
            },
            grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
            },
            toolbox: {
              feature: {
                saveAsImage: {}
              }
            },
            xAxis: {
              type: 'category',
              boundaryGap: false,
              data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
              type: 'value'
            },
            series: [
              {
                name: 'Email',
                type: 'line',
                stack: 'Total',
                data: [120, 132, 101, 134, 90, 230, 210]
              },
              {
                name: 'Union Ads',
                type: 'line',
                stack: 'Total',
                data: [220, 182, 191, 234, 290, 330, 310]
              },
              {
                name: 'Video Ads',
                type: 'line',
                stack: 'Total',
                data: [150, 232, 201, 154, 190, 330, 410]
              },
              {
                name: 'Direct',
                type: 'line',
                stack: 'Total',
                data: [320, 332, 301, 334, 390, 330, 320]
              },
              {
                name: 'Search Engine',
                type: 'line',
                stack: 'Total',
                data: [820, 932, 901, 934, 1290, 1330, 1320]
              }
            ]
          }
                },
                  mounted() {
                    var that = this;
                    var myChart = echarts.init(document.getElementById("chart_example"));
                        myChart.setOption(that.options);
                        
                        // 雷达
                        var myChasrt = echarts.init(document.getElementById("Basic"));
                            myChasrt.setOption(that.Basic);
                        
                  },
                  methods:{
                      getDown(){
                          
                            var shareContent = document.getElementById("app")
                              var width = shareContent.offsetWidth / 4
                              var height = shareContent.offsetHeight / 4
                              let _this = this
                            html2canvas(document.getElementById("app"), {
                             scale: 2, //放大一倍，使图像清晰一点
                                onrendered: function(canvas) {
                                 var context = canvas.getContext('2d')
                                            context.mozImageSmoothingEnabled = false
                                            context.webkitImageSmoothingEnabled = false
                                            context.msImageSmoothingEnabled = false
                                            context.imageSmoothingEnabled = false
                                            var pageData = canvas.toDataURL('image/jpeg', 1.0)
                                            var img = new Image()
                                            img.src = pageData
                                            img.onload = function () {
                                                // 获取dom高度、宽度
                                                img.width = img.width / 2
                                                img.height = img.height / 2
                                                img.style.transform = 'scale(0.5)'
                                                if (width > height) {
                                                    // 此可以根据打印的大小进行自动调节
                                                    // eslint-disable-next-line
                                                    var pdf = new jsPDF('l', 'mm', [
                                                        width * 0.65,
                                                        height * 0.545
                                                    ])
                                                } else {
                                                    // eslint-disable-next-line
                                                    var pdf = new jsPDF('p', 'mm', [
                                                        width * 0.65,
                                                        height * 0.545
                                                    ])
                                                }
                                                pdf.addImage(
                                                    pageData,
                                                    'jpeg',
                                                    0,
                                                    0,
                                                    width * 0.65,
                                                    height * 0.545
                                                )
                                                pdf.save("报告" + '.pdf')
                                            }
                        
                                    // //输出保存命名为content的pdf
                                    // doc.save('content.pdf');
                                }
                            });
                      
                      }
                  }
            });
        </script>
    </body>
</html>```


![在这里插入图片描述](https://img-blog.csdnimg.cn/1f043b6978d14d9a896fefdddcb278f6.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA6I-c6bif6ICB5LqU,size_20,color_FFFFFF,t_70,g_se,x_16)
菜鸟老五
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
（已解决）jspdf + html2canvas实现导出html为PDF文件（高清、分页）解决图片和表格被分割截断以及滚动条的问题。（含源码及详细解释）
c1007857613的专栏
05-30 1089
jspdf + html2canvas实现导出html为PDF文件（高清、分页）解决图片和表格被分割截断以及滚动条的问题。（含源码及详细解释）
利用jsPDF和html2canvas前端实现页面PDF多页导出
归小超博客
03-30 7158
这两天说要做一个流程表单的导出功能，所以就想到这个，直接导出为PDF形式： 其本质主要是利用页面偏移量position，canvas的待导出的整体高度leftHeight和通过一页pdf显示html页面生成的canvas高度pageHeight。 首先因为我们导出采用的是a4纸的形式，尺寸为595.28 * 841.89。我们可以相应计算出宽高比例，然后根据canvas的宽度，得到等比缩放后的高度...
jspdf实现JavaScript显示pdf文档可分页
03-30
jspdf源代码jspdf源代码jspdf源代码jspdf源代码jspdf源代码jspdf源代码
使用jsPDF+html2canvas导出PDF文件分页--可添加上下页边距
最新发布
weixin_43389023的博客
01-19 1830
页面html转成pdf文件下载时，分页上下页边距添加
jspdf实现JavaScript显示pdf文档可分页哦
12-08
jspdf源代码jspdf源代码jspdf源代码jspdf源代码jspdf源代码jspdf源代码
使用jspdf打印pdf 支持分页
04-02
利用jspdf技术,可以完美支持HTML转pdf,支持下载,支持自定义分类
jQ导出PDF自动分页打印代码
04-25
在IT行业中，将网页内容导出为PDF格式并实现自动分页打印是一项常见的需求，尤其在数据报告、文档分享和在线阅读场景下。"jQ导出PDF自动分页打印代码"提供了一种解决方案，利用jQuery和Canvas技术，将HTML文本转化...
页面导出pdf.rar
03-25
这个名为"页面导出pdf.rar"的压缩包显然包含了实现这一功能的关键资源。让我们详细了解一下这些文件以及如何利用它们来实现HTML页面到PDF的转换。 首先，`jspdf.debug.js`是JavaScript PDF Document Library (jsPDF...
jQ导出PDF自动分页打印代码.zip
10-15
在IT行业中，尤其是在网页开发领域，将网页内容导出为PDF格式并实现自动分页是一项常见的需求。"jQ导出PDF自动分页打印代码.zip" 提供的是一套基于jQuery和CSS特效的解决方案，旨在帮助开发者高效地完成这项任务。...
jQ导出PDF自动分页打印特效代码
03-20
在IT行业中，将网页内容导出为PDF格式并实现自动分页打印是一项常见的需求，尤其在数据报告、文档分享和在线阅读场景下。"jQ导出PDF自动分页打印特效代码"是一个利用jQuery和Canvas技术来实现这一功能的解决方案。 ...
Vue如何将页面导出成PDF文件
10-14
在Vue应用中，将页面导出为PDF文件通常涉及到前端技术的组合，包括HTML2Canvas和jsPDF这两个库。这两个库分别用于将HTML内容转换为Canvas图像，然后将Canvas图像进一步转换为PDF文档。以下是对这个过程的详细解释： ...
jspdf +html2canvas 导出pdf并实现分页
weixin_43770858的博客
05-12 1112
/ 获得该容器到文档顶部的距离。//a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高。//有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)// 这里默认横向没有滚动条的情况，因为offset.left(),有无滚动条的时候存在差值，因此。// 获得滚动条长度的一半。// 获得该容器的高。// 获得该容器的宽。//一页pdf显示html页面生成的canvas高度;//未生成pdf的html页面高度。
导出pdf,自动分页
Sk22582的博客
06-15 1168
在修改后的代码中，我们首先定义了 A4 纸的宽度和高度，然后创建了一个 A4 尺寸的 PDF 实例。接着，我们在 generatePDF 函数中判断当前页的高度是否超过 A4 高度，如果超过，则新增一页，并将 pdfHeight 重置为 0。如果总高度超过当前页面的高度，则继续滚动页面，并使用 html2canvas 生成新的 canvas，并调用 generatePDF 方法将其添加到 PDF 中，直到滚动到超出总高度为止。最后，我们使用 pdf.save 方法保存并下载 PDF 文件。
导出分页pdf
Sk22582的博客
06-15 231
在添加图像之前，先判断内容高度是否超出一页。如果内容高度不超出一页，直接保存PDF并退出递归。在创建新页面之前，先检查是否还有剩余的高度需要分页。如果有剩余高度，则调用。，以确保下一页从当前页的左下方开始截断。
JS 如何将 HTML 页面导出为多页 PDF
热门推荐
pwc1996的博客
04-12 2万+
前话之前写了一篇博文 JS 如何将 HTML 页面导出为 PDF 。 当时只是自己有个需求，只是导出一页PDF，写个了示例。之后就有同学私信我问我怎么导出多页PDF。好吧，其实这些看文档画画图自己是可以写出来的。以后也可能有转换HTML导出多页的PDF需求，就决定写一个库 renderPDF 吧。地址在这里：https://github.com/pwcong/how-transform-html-
jsPDF(高清)，html导出多页pdf（分享）
Dra123123的博客
04-23 4136
文章目录前言一、pandas是什么？二、使用步骤1.引入库2.读入数据总结 前言 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 提示：以下是本篇文章正文内容，下面案例可供参考 一、pandas是什么？ 示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。 二、使用步骤 1.引入库 代码如下（示例）： import numpy as np import
jspdf-html2canvas 自动分页 网页导出pdf 自动根据dom子节点的高度进行分页，避免dom的内容在分页的时候被截断
xiaozhi122的博客
08-10 1293
jspdf-html2canvas 网页导出pdf 自动根据dom子节点的高度进行分页，避免dom的内容在分页的时候被截断说明直接上代码 说明 我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客： 要导出的内容用 .pdf 包裹 ，默认会以.pdf的子节点进行整块的高度计算，如果孙节点需要整块计算，孙节点的父节点上增加.pdf； 如果导出的内容里面有外部图片引用，需要配置外部图片支持跨域； 增加了 图片拖拽 功能，你可
Javascript 将html转成pdf，可以下载，支持多页（html2canvas 和 jsPDF）
g291976422的博客
07-30 2252
最近项目碰到一个需求，将一个表格生成一份报告，故而想到将表格导出为pdf文件。此功能用到了jspdf和html2canvas两个开源插件，可以 npm 直接拉取，不多说，代码如下： 在获取到页面截取的base64位的长长图片之后，添加到pdf中。 $("#downpdf").on("click", function() { //获取节点高度，后面为克隆节点设...
vue2 导出pdf 分页不截断
12-23
以下是使用Vue2导出PDF并分页不截断的步骤： 1. 首先，安装所需的模块。在命令行中运行以下命令： ```shell npm install html2canvas jspdf --save ``` 2. 在Vue组件中，引入所需的模块： ```javascript import html2canvas from 'html2canvas'; import jsPDF from 'jspdf'; ``` 3. 创建一个方法来导出PDF。在该方法中，首先使用html2canvas将页面的HTML内容转换为图片，然后使用jsPDF将图片添加到PDF中。确保在转换为图片时，将页面分成多个部分以避免分页截断。 ```javascript export default { methods: { exportPDF() { const pdf = new jsPDF('p', 'mm', 'a4'); const pages = document.querySelectorAll('.page'); // 将页面分成多个部分 let y = 0; pages.forEach((page, index) => { html2canvas(page).then(canvas => { const imgData = canvas.toDataURL('image/png'); const imgWidth = pdf.internal.pageSize.getWidth(); const imgHeight = (canvas.height * imgWidth) / canvas.width; if (index !== 0) { pdf.addPage(); } pdf.addImage(imgData, 'PNG', 0, y, imgWidth, imgHeight); y += imgHeight; if (index === pages.length - 1) { pdf.save('export.pdf'); } }); }); } } } ``` 4. 在Vue模板中，添加一个按钮来触发导出PDF的方法： ```html <template> <div> <!-- 页面内容 --> <div class="page">Page 1</div> <div class="page">Page 2</div> <div class="page">Page 3</div> <!-- 导出按钮 --> <button @click="exportPDF">导出PDF</button> </div> </template> ``` 这样，当用户点击导出按钮时，将会生成一个包含所有页面内容的PDF文件，并且页面内容不会被截断。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

菜鸟老五

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值